import React from 'react'
import styled from 'styled-components'
import style from '../../assets/global-style'

const CircleWrapper = styled.div`
  position: relative;
  circle {
    stroke-width: 8px;
    transform-origin: center;
    &.progress-background {
      transform: scale(0.9);
      stroke: ${style['theme-color-shadow']};
    }
    &.progress-bar {
      transform: scale(0.9) rotate(-90deg);
      stroke: ${style['theme-color']};
    }
  }
  line {
    stroke-width: 6px;
    stroke: ${style['theme-color']};
  }
`

function ProgressCircle(props) {
  const { radius, percent } = props
  const dashArr = Math.PI * 100
  const dashOffset = (1 - percent) * dashArr
  return (
    <CircleWrapper>
      <svg
        width={radius}
        height={radius}
        viewBox="0 0 100 100"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >
        {/* <line className="line1" x1="41" y1="33" x2="41" y2="66"></line>
        <line className="line1" x1="59" y1="33" x2="59" y2="66"></line> */}
        <circle
          className="progress-background"
          r="41"
          cx="50"
          cy="50"
          fill="transparent"
        ></circle>
        <circle
          className="progress-bar"
          r="41"
          cx="50"
          cy="50"
          fill="transparent"
          strokeDasharray={dashArr}
          strokeDashoffset={dashOffset}
        />
      </svg>
      {props.children}
    </CircleWrapper>
  )
}

export default React.memo(ProgressCircle)
